{include file='public/head'}
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>聊天记录</legend>
</fieldset>

<div style="width: 100%;display: flex;flex-direction: row;height: 100%">
    <div style="flex:1;overflow:auto;height:100%;border-right: 1px #666 solid;margin-left: 20px;"  id="LAY_demo1">
        <ul class="flow-default" id="ul_1"></ul>
    </div>
    <div style="flex:1;overflow:auto;height:100%;border-right: 1px #666 solid;margin-left: 20px;"  id="LAY_demo2" >
        <ul class="flow-default" id="ul_2"></ul>
    </div>
    <div style="flex:4;height: 100%;margin-right: 40px;margin-left: 20px;" id="LAY_demo3">
        <div class="flow-default" id="ul_3"></div>
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        flow.load({
            elem: '#ul_1' //流加载容器
            ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: true
            ,mb:100
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                var size = 10;
                //模拟数据插入
                setTimeout(function(){
                    $.ajax({
                        url:'getHaoYous',
                        method:'get',
                        data:{
                            "page":page,
                            "size":size
                        },
                        success:function (data) {
                            console.log(data);
                            var users = data.data;
                            for(var i = 0; i < users.length; i++){
                                console.log(users[i]['name']);
                                lis.push('<a href="javascript:getFriend('+users[i]["id"]+','+users[i]["role"]+')"><li class="">'+'<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;"></i> '+ users[i]["name"]+'</li></a>')
                            }
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < (Math.ceil(data.count)/size)); //假设总页数为 10
                            if(users.length>0){
                                getFriend(users[0]["id"],users[0]["role"]);
                            }
                            // getFriend(7);
                        }
                    })
                }, 100);
            }
        });





    });

    function getFriend(id,role) {
        $("#ul_2").remove();
        $("#LAY_demo2").append("<ul class='flow-default' id='ul_2'></ul>")
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '#ul_2' //流加载容器
                , scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
                , isAuto: true
                , mb: 100
                , done: function (page, next) { //执行下一页的回调
                    //模拟数据插入
                    var size = 10;
                    var lis = [];
                    setTimeout(function () {
                        $.ajax({
                            url: 'getFriends',
                            method: 'get',
                            data: {
                                "page": page,
                                "size": size,
                                "id": id,
                                "role":role
                            },
                            success: function (data) {
                                console.log(data);
                                var users = data.data;
                                for (var i = 0; i < users.length; i++) {
                                    console.log(users[i]['name']);
                                    lis.push('<a href="javascript:getMessages(' + id + ',' + users[i]["id"] + ')"><li class="">' +'<i class="layui-icon layui-icon-chat" style="font-size: 30px; color: #1E9FFF;"></i> '+ users[i]["name"] + '</li>')
                                }
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < (Math.ceil(data.count / size))); //假设总页数为 10
                                if(users.length>0){
                                    getMessages(id,users[0]["id"]);
                                }
                            },
                            error: function (data) {
                                console.log(data);
                            }
                        })
                    }, 100);
                }
            });
        });
    }

    function getMessages(sid,tid) {
        $("#ul_3").remove();
        $("#LAY_demo3").append("<div class='flow-default' id='ul_3'></div>")
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '#ul_3' //流加载容器
                , scrollElem: '#LAY_demo3' //滚动条所在元素，一般不用填，此处只是演示需要。
                , isAuto: true
                , mb: 100
                , done: function (page, next) { //执行下一页的回调
                    //模拟数据插入
                    var size = 10;
                    var lis = [];
                    setTimeout(function () {
                        $.ajax({
                            url: 'getMessages',
                            method: 'get',
                            data: {
                                "page": page,
                                "size": size,
                                "sid": sid,
                                "tid": tid,
                            },
                            success: function (data) {
                                console.log(data);
                                var users = data.data;
                                for (var i = 0; i < users.length; i++) {
                                    if (users[i]['code'] == (sid + "," + tid)) {
                                        lis.push('<div class="liright"><div class="message">' + users[i]["send_message"] +'</div><img src=\''+data.sendUserImg+'\'>'+'</div>')
                                    } else {
                                        lis.push('<div class="lileft">' +'<img src=\''+data.toUserImg+'\'><div class="message">'+ users[i]["send_message"] + '</div></div>')
                                    }

                                }
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < (Math.ceil(data.count) / size)); //假设总页数为 10
                            },
                            error: function (data) {
                                console.log(data);
                            }
                        })
                    }, 100);
                }
            });
        });
    }
</script>

</body>
</html>